<template>
  <div ref="chart" style="width: 98%;min-width:360px ;height: 300px;"></div>
</template>
<script>
  import dashboardAPI from '@/api/dashboard/dashboard'
  import {
    EmptyChart
  } from '@/views/components/chart'
  import {
    codeByType,
    controllerOptions
  } from '@/views/device/common'
  export default {
    name: 'DeviceCountPolar',
    mixins: [EmptyChart],
    data() {
      const vm = this
      return {
        categories: [],
        chartOption: {
          title: {
            text: vm.$t('chart.DeviceCount'),
            left: 'center'
          },
          polar: {
            radius: [30, '70%']
          },
          radiusAxis: {
            max: 20,
            minInterval: 1
          },
          tooltip: {
            show: true
          },
          angleAxis: {
            type: 'category'
          },
          animation: false
        },
        list: []
      }
    },
    created() {
      this.queryData()
    },
    mounted() {
      setTimeout(this.setCategory, 50)
    },
    methods: {
      setCategory() {
        const vm = this
        this.categories = controllerOptions.map(item => {
          const {
            type,
            code
          } = item
          return vm.$t('dictionary.' + (code === undefined || code === undefined ? type : code))
        })
      },
      queryData() {
        const vm = this
        dashboardAPI.deviceCount().then(res => {
          vm.list = vm.list.concat(res.data.map(item => {
            return {
              name: vm.$t('dictionary.' + codeByType(item.name)),
              value: item.value
            }
          }))
          vm.updateChart()
        })
      },
      createOption() {
        const data = []
        const {
          list
        } = this
        var max = 0
        for (var i = 0; i < list.length; i++) {
          const item = list[i]
          const {
            value,
            name
          } = item
          if (value > max) {
            max = value
          }
          data.push({
            name,
            value
          })
        }
        max++
        return {
          angleAxis: {
            type: 'category',
            data: this.categories
          },
          radiusAxis: {
            max
          },
          series: {
            type: 'bar',
            coordinateSystem: 'polar',
            label: {
              show: false,
              position: 'middle',
              formatter: '{b}: {c}'
            },
            data
          }
        }
      }
    }
  }

</script>
